<template>
    <div class="goodsInfo-container">
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" ref="ball" v-show="isShow"></div>
        </transition>
        <!-- 商品轮播图区域 -->  
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swiper :lunbotuList="lunbo"></swiper>
                </div>
            </div>
        </div>
        <!-- 商品购买区域 -->
        <div class="mui-card">
            <div class="mui-card-header">商品的名称标题</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        市场价：<del>￥{{goodsInfo.market_price}}</del>&nbsp;&nbsp;销售价：<span class="now_price">￥{{goodsInfo.sell_price}}</span>
                    </p>
                    <p>购买数量： <numberbox @getCount="getNumCount" :max="goodsInfo.stock_quantity"></numberbox></p>
                    <p>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="addToCar">加入购物车</mt-button>
                    </p>
                </div>
            </div> 
        </div>
        <!-- 商品参数区域 -->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：{{goodsInfo.id}}</p>
                    <p>库存情况：{{goodsInfo.stock_quantity}}件</p>
                    <p>上架时间：{{goodsInfo.add_time}}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="goGoodsDesc(goodsInfo.id)">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain @click="goGoodsComment(goodsInfo.id)">商品评论</mt-button>
            </div>
        </div>
    </div>
</template>

<script>
import swiper from "../subcomponents/swiper.vue";
import numberbox from "../subcomponents/numberbox.vue";
export default {
    data:function(){
        return {
            id:this.$route.params.id,
            lunbo:[],
            goodsInfo:{},
            isShow:false,
            numCount:1
        }
    },
    created(){
        this.getLunbo();
        this.getGoodsInfo(); 
    },
    methods:{
        getLunbo(){
            console.log(this.id);
            this.$http.get("../mydata/goodsList/1.json").then(result=>{ 
              if(result.body.status===0){ 
                  result.body.message.forEach(item=>{
                    item.img_url = item.img;
                  });
              };
              this.lunbo=result.body.message;
            });
        },
        getGoodsInfo(){
            this.$http.get("../mydata/goodsList/goodsInfo/"+this.id+".json").then(result=>{ 
                if(result.body.status===0){
                    this.goodsInfo = result.body.message[0];
                    console.log(goodsInfo);
                }
            }); 
        },
        goGoodsDesc(id){
            this.$router.push({name:"goodsDesc",params:{id}});
        },
        goGoodsComment(id){
            this.$router.push({name:"goodsComment",params:{id}});
        },
        addToCar(){
            this.isShow=!this.isShow;
            var carObj = {
                "id":this.id,
                "count":this.numCount,
                "sell_price":this.goodsInfo.sell_price,
                "selected":false
            };  
            this.$store.commit("optCar",carObj);
        },
        beforeEnter(el){
            el.style.transform="translate(0,0)";
        },
        enter(el,done){
            el.offsetWidth;  
            const ballPosition = this.$refs.ball.getBoundingClientRect();  
            const badgePosition = document.getElementById("badge").getBoundingClientRect(); 
            const xDist = badgePosition.left-ballPosition.left;
            const yDist = badgePosition.top-ballPosition.top; 
            el.style.transform=`translate(${xDist}px,${yDist}px)`;
            el.style.transition="all 0.5s ease";
            done();
        },
        afterEnter(el){
            this.isShow=!this.isShow;
        },
        getNumCount(count){
            this.numCount = count;
            console.log("count的值为："+this.numCount);
        }
    },
    components:{
        swiper,
        numberbox
    }
}
</script>


<style scoped>
.goodsInfo-container{
    background: #eee;
    overflow: hidden;
}
.mui-card-footer{
    display: block;
}
.mui-card-footer>button{
    margin: 15px 0;
}
.ball{
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top: 386px;
    left: 140px;
    z-index: 99; 
}
</style>